In depth understanding of javascript immediately execute function of {... } of

Javascript is much more casual than other programming languages, so javascript code is full of weird and sometimes confusing ways to write it, and of course, being able to understand all kinds of different ways to write it is a further step toward understanding the language's features.

(function () {... })() and (function (){... } ()) is a common way for javascript to execute functions immediately. At first, I thought it was an anonymous function wrapped in parentheses, followed by a parenthesis to call a function. To understand functions that execute immediately, you need to understand some basic concepts of functions.

Function declarations, function expressions, anonymous functions

Function fnName () {... }; Declare a function using the function keyword, and then specify a function name, called the function declaration.

Var fnName = function () {... }; The function keyword is used to declare a function, but the function is not named, and finally the anonymous function is given a variable, called function expression, which is the most common form of function expression syntax.

Anonymous function: function () {}; Function keyword is used to declare a function, but the function is not named, so it is called anonymous function, anonymous function belongs to the function expression, anonymous function has many functions, given a variable to create a function, given an event to become an event handler or create closure, and so on.

Function declarations and Function expression of the difference is that one, the Javascript engine in parsing Javascript code 'Function declarations' (the Function declaration Hoisting) the currently executing Function declaration on the environment (scope), the Function expression must wait until Javascirtp engine execution to where it falls, can from top and bottom line analytic Function expression, second, the Function can be added behind the parentheses immediately call the Function, the Function declaration can't, It can only be called as fnName(). Here are two examples of the difference.

fnName();
function fnName(){
  ...
}
//Normal, because the function declaration is' promoted ', the function call can precede the function declaration
 
fnName();
var fnName=function(){
  ...
}
// Error, variable fnName The reference to the function has not been saved, and the function call must follow the function expression 

var fnName=function(){
  alert('Hello World');
}();
//The function expression is followed by parentheses so that the function can be called immediately when the javascript engine parses to this point
function fnName(){
  alert('Hello World');
}();
//No errors are reported, but the javascript engine only parses the function declaration, ignoring the parentheses behind it, and the function declaration is not called
function(){
  console.log('Hello World');  
}();
//Syntax error, anonymous function is not assigned, although it belongs to function expression,
//So the javascript engine treats the function keyword at the beginning as a function declaration and reports an error: a function name is required

After understanding some of the basic concepts of functions, go back to (function(){... })() and (function (){... } (), both the immediate execution function method and at first I thought it was an anonymous functions, brackets and add a bracket immediately behind the function call, then I don't know why add parentheses, then understand, to be at the back of the body of the function and the brackets can call immediately, this function must be function expression, can't be a function declaration.

(function(a){
  console.log(a);  //Firebug outputs 123, using the () operator
})(123);
 
(function(a){
  console.log(a);  //Firebug outputs 1234, using the () operator
}(1234));
 
!function(a){
  console.log(a);  //Firebug output 12345, use! The operator
}(12345);
 
+function(a){
  console.log(a);  //Firebug outputs 123456, using the + operator
}(123456);
 
-function(a){
  console.log(a);  //Firebug outputs 1234567, using the - operator
}(1234567);
 
var fn=function(a){
  console.log(a);  //Firebug outputs 12345678, using the = operator
}(12345678)

You can see the output, add before function! +, +, - or even a comma, etc., can be executed immediately after the function is defined, while (),! , +, -, =, and other operators, will function declaration into a function expression, to eliminate the javascript engine to recognize the function expression and function declaration ambiguity, tell the javascript engine that this is a function expression, not a function declaration, can be followed by parentheses, and immediately execute the function code.

Parentheses are the safest thing to do because! Operators such as + and - also operate on the return value of the function, sometimes causing unnecessary trouble.

But what's the point of writing it this way?

Useless the concept of the private scope in javascript, if in many development projects in global or local scope statement you some variables that may be others accidentally variables with the same name to override, according to the characteristics of the scope chain javascript function, you can use this technology can imitate a private scope, use anonymous functions as a "container", "container" internal can access external variables, and the external environment can not access the variables within the "container", so, the function () {... })() internally defined variables do not conflict with external variables, commonly known as "anonymous wrapper" or "namespace".

JQuery USES this method, wrapping the JQuery code in (function (window,undefined){... Jquery code... In} (window), when calling JQuery code in the global scope, the function of protecting JQuery internal variables can be achieved.

This paper is for personal understanding. If there are any mistakes, please feel free to point out.

The definitive guide to javascript, javascript advanced programming